<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap Tree View</title>
    <link href="./css/bootstrap.css" rel="stylesheet">
    <!-- <link href="./css/bootstrap-treeview.css" rel="stylesheet"> -->
  </head>
  <body>
  	<div class="container">
      <div class="row">
        <!--按键部分-->
        <div class="col-sm-4"><button id="btn-select-node" type="button" class="btn btn-block btn-primary">添加</button></div>
        <div class="col-sm-4"><button id="btn-unselect-node" type="button" class="btn btn-block btn-primary">编辑</button></div>
        <div class="col-sm-4"><button id="btn-toggle-selected" type="button" class="btn btn-block btn-primary">删除</button></div>
        <!--treeview 部分-->

        <div class="col-sm-4">
          <h2></h2>
          <div id="treeview-selectable" class=""></div>
        </div>
        <div class="col-sm-4">
          <h2></h2>
          <div id="selectable-output"></div>
        </div>
        <div class="col-sm-4">
          <h2>Input</h2>
          <div class="form-group">
            <label for="input-class">名称分类:</label>
            <input type="input" id="input-class" placeholder="" value="">
          </div>
          <div class="form-group">
            <label for="input-parent-class">上级分类:</label>
            <input type="input" id="input-parent-class" placeholder="" value="">
          </div>
          <div class="form-group">
            <label for="input-remark">备注:</label>
            <input type="input" id="input-remark" placeholder="" value="">
          </div>
          <div class="form-group">
            <button type="button" class="btn btn-primary select-node" id="btn-save">保存</button>
          </div>
        </div>
      </div>

    </div>
    <script src="./js/jquery.js"></script>
  	<script src="./js/bootstrap-treeview.js"></script>
    <script src="./js/base-ajax.js"></script>
  	<script type="text/javascript">

  		$(function() {

        var defaultData = [
          {
            //text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
              {
                text: 'Child 1',
                href: '#child1',
                tags: ['2'],
                nodes: [
                  {
                    text: 'Grandchild 1',
                    href: '#grandchild1',
                    tags: ['0']
                  },
                  {
                    text: 'Grandchild 2',
                    href: '#grandchild2',
                    tags: ['0']
                  }
                ]
              },
              {
                text: 'Child 2',
                href: '#child2',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0']
          },
          {
            text: 'Parent 3',
            href: '#parent3',
             tags: ['0']
          },
          {
            text: 'Parent 4',
            href: '#parent4',
            tags: ['0']
          },
          {
            text: 'Parent 5',
            href: '#parent5'  ,
            tags: ['0']
          }
        ];

        var alternateData = [
          {
            text: 'Parent 1',
            tags: ['2'],
            nodes: [
              {
                text: 'Child 1',
                tags: ['3'],
                nodes: [
                  {
                    text: 'Grandchild 1',
                    tags: ['6']
                  },
                  {
                    text: 'Grandchild 2',
                    tags: ['3']
                  }
                ]
              },
              {
                text: 'Child 2',
                tags: ['3']
              }
            ]
          },
          {
            text: 'Parent 2',
            tags: ['7']
          },
          {
            text: 'Parent 3',
            icon: 'glyphicon glyphicon-earphone',
            href: '#demo',
            tags: ['11']
          },
          {
            text: 'Parent 4',
            icon: 'glyphicon glyphicon-cloud-download',
            href: '/demo.html',
            tags: ['19'],
            selected: true
          },
          {
            text: 'Parent 5',
            icon: 'glyphicon glyphicon-certificate',
            color: 'pink',
            backColor: 'red',
            href: 'http://www.tesco.com',
            tags: ['available','0']
          }
        ];

        var json = '[' +
          '{' +
            '"text": "Parent 1",' +
            '"nodes": [' +
              '{' +
                '"text": "Child 1",' +
                '"nodes": [' +
                  '{' +
                    '"text": "Grandchild 1"' +
                  '},' +
                  '{' +
                    '"text": "Grandchild 2"' +
                  '}' +
                ']' +
              '},' +
              '{' +
                '"text": "Child 2"' +
              '}' +
            ']' +
          '},' +
          '{' +
            '"text": "Parent 2"' +
          '},' +
          '{' +
            '"text": "Parent 3"' +
          '},' +
          '{' +
            '"text": "Parent 4"' +
          '},' +
          '{' +
            '"text": "Parent 5"' +
          '}' +
        ']';

          var json1 = '['+
                  '{' +
                  '"text": "Parent 2"' +
                  '},' +
                  '{' +
                  '"text": "Parent 3"' +
                  '},' +
                  '{' +
                  '"text": "Parent 4"' +
                  '},' +
                  '{' +
                  '"text": "Parent 5"' +
                  '}' +
                  ']';
          //获取远方数据，请修正！！！
        var remotedata = getData("http://dingn.zicp.net/ekl/libclass/alltree", "result");
          //获取到的数据如下
/*        var remotedata1 = [
            {
              "lcId": 3,
              "lcName": "资源分类",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [
                {
                  "lcId": 11,
                  "lcName": "资源分类4",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 10,
                  "lcName": "资源分类3",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 9,
                  "lcName": "资源分类2",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 8,
                  "lcName": "资源分类",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                }
              ]
            },
            {
              "lcId": 4,
              "lcName": "资源分类1",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [
                {
                  "lcId": 12,
                  "lcName": "资源分类",
                  "lcDesc": "资源描述",
                  "parentId": 4,
                  "flag": "0",
                  "childs": [ ]
                }
              ]
            },
            {
              "lcId": 5,
              "lcName": "资源分类2",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            },
            {
              "lcId": 6,
              "lcName": "资源分类3",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            },
            {
              "lcId": 7,
              "lcName": "资源分类4",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            }
          ];*/

          //转化后数据，写转化函数！！！
          //1、lcName->text   2、childs如果不为空，那么childs->nodes
          var remotedata2 = [
            {
              "lcId": 3,
              "text": "资源分类",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "nodes": [
                {
                  "lcId": 11,
                  "text": "资源分类4",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 10,
                  "text": "资源分类3",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 9,
                  "text": "资源分类2",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                },
                {
                  "lcId": 8,
                  "text": "资源分类",
                  "lcDesc": "资源描述",
                  "parentId": 3,
                  "flag": "0",
                  "childs": [ ]
                }
              ]
            },
            {
              "lcId": 4,
              "text": "资源分类1",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "nodes": [
                {
                  "lcId": 12,
                  "text": "资源分类",
                  "lcDesc": "资源描述",
                  "parentId": 4,
                  "flag": "0",
                  "childs": [ ]
                }
              ]
            },
            {
              "lcId": 5,
              "text": "资源分类2",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            },
            {
              "lcId": 6,
              "text": "资源分类3",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            },
            {
              "lcId": 7,
              "text": "资源分类4",
              "lcDesc": "资源描述",
              "parentId": null,
              "flag": "0",
              "childs": [ ]
            }
          ];
        var cur_node;
        var initSelectableTree = function() {
          return $('#treeview-selectable').treeview({
            data: remotedata2,
            multiSelect: $('#chk-select-multi').is(':checked'),
            onNodeSelected: function(event, node) {
              $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
              //1。根据node.txt获取相应的json
              //2.填充UI
              $('#input-class').val(node.text);
              //根据Node的parentId，获取上级的node，然后填充parent
              $('#input-parent-class').val(node.parentId);

              $('#input-remark').val(node.lcDesc);

              //记录当前的node,给按键使用
              cur_node = node;
              //$('#btn-save').setDisable(true);
            }
          });
        };
        var $selectableTree = initSelectableTree();

        var findSelectableNodes = function() {
          return $selectableTree.treeview('search', [ $('#input-select-node').val(), { ignoreCase: false, exactMatch: false } ]);
        };
        var selectableNodes = findSelectableNodes();

          var updatetree = function (tree) {
            //更新remotedata2，然后触发下面的函数
            initSelectableTree();
/*            var initSelectableTree = function() {
              return $('#treeview-selectable').treeview({
                data: json1,
                onNodeSelected: function(event, node) {
                  $('#selectable-output').prepend('<p>' + node.text + ' was selected</p>');
                  //1。根据node.txt获取相应的json
                  //2.填充UI
                  $('#input-class').val(node.text);
                  //根据Node的parentId，获取上级的node，然后填充parent
                  $('#input-parent-class').val(node.parentId);

                  $('#input-remark').val(node.lcDesc);

                  //记录当前的node,给按键使用
                  cur_node = node;
                  //btnDisable(false);
                }
              });
            }();*/
          }
          function isEmptyObject(e) {
            var t;
            for (t in e)
              return !1;
            return !0
          }

          function btnEnable(Enable) {
            $('#btn-select-node').prop('disabled', Enable);
            $('#btn-unselect-node').prop('disabled', Enable);
            $('#btn-toggle-selected').prop('disabled', Enable);
          }

          $('#btn-select-node').on('click', function (e) {
            //if(isEmptyObject(cur_node))
            //  alert("请选择节点");
            $('#selectable-output').prepend('<p>' + cur_node.text + ' 添加</p>');
            //$('#treeview-selectable').treeview('remove');
            updatetree($selectableTree);
          });

        $('#btn-unselect-node').on('click', function (e) {
          $('#selectable-output').prepend('<p>' + cur_node.text + ' 编辑</p>');
          updatetree($selectableTree);
        });

        $('#btn-toggle-selected').on('click', function (e) {
          $('#selectable-output').prepend('<p>' + cur_node.text + ' 删除</p>');
          updatetree($selectableTree);
        });
        });
  	</script>
  </body>
</html>
